<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>zk_curator_framework</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/zTree/zTreeStyle/zTreeStyle.css"/>	
	<link rel="stylesheet" type="text/css" href="/static/plugins/webuploader/webuploader.css"/>
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />
	<style type="text/css">	
		.layui-form.layui-border-box.layui-table-view {
		    margin-left: 221px;
		}
		.layui-table-body.layui-table-main tr .layui-table-cell{
			height: 248px;
   		    line-height: unset;
		}
		.image-list .item{	
		    height: 130px;		
		    margin: 0px;
		}
		.image-list .item .image-card{
			height: 62px;
		}
		.image-list .item img{
		    max-height: 80px;	
    		max-width: 108px;
		}
		.webuploader-pick{
		    height: 98px!important;
		    background: #f8f8f8 url(./../static/images/upload.png) center 18px no-repeat!important;
		}
		.image-list .layui-icon-delete{	
			position: relative;
    		bottom: -20px;
		}
		.image-container{
			margin-left: 0px;
		}	
	</style>
</head>
<body class="body-container">
		<a style="font-size: 15px;">1、ZooKeeper 是一个开源的分布式协调服务，由雅虎创建，是 Google Chubby 的开源实现。</a></br>
		<a style="font-size: 15px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅、负载均衡、命名服务、分布式协调/通知、集群管理、Master 选举、分布式锁和分布式队列等功能</a></br>
		<a style="font-size: 15px;">2、集群角色 <img alt="" src="https://img-blog.csdn.net/20180911222230900?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWhhbzExODY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"></a></br>
		<a style="font-size: 15px;">3、Apache curator-framework是一个高层API,对curator-client组件进行了二次封装,开发者可以更少的关注zookeeper底层,进行快捷的开发</a>
	<div>
		<div class="node_name_list" style=" height: 38px; line-height: 38px; ">	
		</div>	
		<div style="height: 30px;">
			<!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm get-connect-btn">getConnect</button> -->
			<!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm get-close-btn">getClose</button> -->
		</div>
	</div>
	
	<!-- table表格数据 -->
	<div class="content-container">
		<div class="ztree-container">		
			<label class="ztree-title" for="">zk-curator-数据树</label>
			<ul id="productCategoryZtree" class="ztree"></ul>
		</div>
			
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>
	
	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
	<script src="/static/plugins/zTree/js/jquery.ztree.all.min.js" type="text/javascript"></script>
	<script src="/static/plugins/webuploader/webuploader.js" type="text/javascript"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">		
	
		$(document).ready(function() {
			
			selectZtreeList();
		})
		
		// table
		var table_url = '/pluginsZk/getData';	
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            //,url:''
				//,height:800
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [[					
	            	 {type: 'numbers', title: '序号'}	
	            	,{field:'nodeName',width:140, title: '节点名称'}	
	            	,{field:'path',width:180, title: '节点路径'}	
	                ,{field:'nodeStat',width:100, title: '节点类型', templet:
	                	function(res){
	            			var html = "";	
	            			if(res.nodeStat.ephemeralOwner==0){	
	            				html = '<p style="color: #5fb878;">持久</p>';	
	            			}else {
	            				html = '<p style="color: red;">临时</p>';
	            			}		
	            			return html;
	            		}
	                }	
	                ,{field:'nodeData',width:140, title: '节点数据'}	
	                ,{field:'nodeStat', title: 'zkStat', templet:
	                	function(res){
		                	var html = "";
		                	html+='<p style="font-size: 17px;margin-top: 2px;">{</p>';
	            			html+='<p style="font-size: 17px;margin-top: 2px;">aversion： '+res.nodeStat.aversion+' ， 当前 ZNode的 ACL版本</p>';
	            			html+='<p style="font-size: 17px;margin-top: 2px;">czxid： '+res.nodeStat.czxid+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">dataLength： '+res.nodeStat.dataLength+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">numChildren： '+res.nodeStat.numChildren+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">ephemeralOwner： '+res.nodeStat.ephemeralOwner;
	            			
	            			html+='<p style="font-size: 17px;margin-top: 2px;">pzxid： '+res.nodeStat.pzxid+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 2px;">cversion： '+res.nodeStat.cversion+' ，当前 ZNode 子节点的版本</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">version： '+res.nodeStat.version+' ， 当前 ZNode 的版本</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">mzxid： '+res.nodeStat.mzxid+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 2px;">}</p>';
	            			//html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs look-main-user-info-btn">'+res.mainUserName+'</button>';
	           				return html;	
	                		//return  '<pre>'+JSON.stringify(res.nodeStat)+'</pre>';
	            		}
	                }	
	                /* ,{field:'right',title: '操作',templet: 
	                	function(res){		
	                		var html = "";	
                			html += '<a class="layui-btn layui-btn-normal layui-btn-xs edit-info-btn"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
                			return html;	
	                	}
	                } */		
	            ]]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	 
	            }
	        });  
    	});
		
		layui.use('form', function () {
			var form = layui.form;
			// 品牌
			form.on('select(brandIdSelect)', function (data) {
			
		    });	
			// 品牌查询  brandIdSelectQuery
			form.on('select(brandIdSelectQuery)', function (data) {
				console.log(data.value);	
		    });	
		})
		
		// zk连接
		$(document).on('click', '.get-connect-btn', function() {
			$.ajax({					
		        type: 'post',						
		        url: "/pluginsZk/connect",			
		      	data:{},														
		        dataType: 'json',	
		        success: function(res) {
		    		if(res.code==200){											
		    			$(".zk-connect-status").empty().append(res.dataObject.zkState);
		    			
		    			selectZtreeList();	
		    		}else{
		    			layer.msg(res.msg);
		    		}				
			    },							
			    error: function(data){					
			    	
			    }	
		    });	
		})
		
		// zk关闭  
		$(document).on('click', '.get-close-btn', function() {
			$.ajax({					
		        type: 'post',						
		        url: "/pluginsZk/close",			
		      	data:{},														
		        dataType: 'json',	
		        success: function(res) {
		    		if(res.code==200){											
		    			$(".zk-connect-status").empty().append(res.dataObject.zkState);
		    		}else{
		    			layer.msg(res.msg);
		    		}				
			    },							
			    error: function(data){					
			    	
			    }	
		    });	
		})
		
		// 获得zk状态  status
		function getZkStatus(){	
			$.ajax({					
		        type: 'post',						
		        url: "/pluginsZk/status",			
		      	data:{},														
		        dataType: 'json',	
		        success: function(res) {
		    		if(res.code==200){												
		    			$(".zk-connect-status").empty().append(res.dataObject.zkState);
		    		}else{
		    			layer.msg(res.msg);
		    		}				
			    },							
			    error: function(data){					
			    	
			    }	
		    });		
		}
		
		// 树节点
		var ztree_nodes;
			
		// 环境 ztree	
		var ztree_setting = {
		 /* check: {
		    enable: true
		  },	*/
		  data: {
		    simpleData: {
		      enable: true
		    }
		  },
		  callback:{
		      beforeClick:checkedZtree
		  }
		};
		
		var psthVal = "";
		var psthNameVal = "";
		var pIdVal = "";
		function checkedZtree(treeId, treeNode, clickFlag) {
			// 获取父级name					
			psthVal = treeNode.id;
			psthNameVal = treeNode.name;	
			pIdVal = treeNode.pId;
			//console.log(treeNode);
			layui.table.reload('layerTable',{url:table_url,page:{curr:1},where:{'path':psthVal,'psthName':psthNameVal}});	
		}
		
		// 查询列表
		function selectZtreeList(){
			var zNodesHtml = [];	
			var ztreeUrl = '/pluginsZk/getAllNodes';
			$.ajax({					
		        type: 'post',						
		        url: ztreeUrl,			
		      	data:{},														
		        dataType: 'json',	
		        success: function(data) {						
		    		if(data.code==200){											
		    			if(data.dataObject.length>0){
			        		$.each(data.dataObject,function(i,item){	
			        			if(i==0){		
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:true,checked:item.checked});	
			        			}else {	
			        				zNodesHtml.push({ id:item.id, pId:item.pId, name:item.name,open:item.open,checked:item.checked});	
								}		
			        		})	
		    			}				
		    			ztree_nodes = zNodesHtml;					
		    			$.fn.zTree.init($("#productCategoryZtree"), ztree_setting, ztree_nodes);
		    			$('.node_name:eq(0)').trigger('click');
		    		}				
			    },							
			    error: function(data){					
			    	zNodesHtml.push({ id:'-1', pId:'-1', name:'系统繁忙',open:false});	
			    	$.fn.zTree.init($("#productCategoryZtree"), ztree_setting, ztree_nodes);
			    }	
		    });			
		}
	 	
	</script>
</body>
</html>